<!--注册 页面-->
<template>

  <div id="register">

    <el-row>
      <el-col :span="20" :offset="12">
        <el-form :model="vipLevel" status-icon  label-width="100px" class="demo-ruleForm">

          <el-form-item label="图标" prop="face" >
            <uploadCard
              @func="getImgUrl" ref="uploadCard"
              upType="选取图标"
              :listType="uploadParam.LIST_TYPE_PICTURE_CARD"
              :tip="uploadParam.TIP_PICTURE"
              :limit="1"
            ></uploadCard>
          </el-form-item>

          <el-form-item label="代号" prop="code" >
            <el-input v-model="vipLevel.id" ></el-input>
          </el-form-item>
          <el-form-item label="中文级别" prop="mail">
            <el-input  type = "text" v-model="vipLevel.level" ></el-input>
          </el-form-item>
          <el-form-item label="会员类型" prop="vipType" >
            <el-input placeholder="选择级别" v-model="vipLevel.vipType" class="input-with-select" :disabled="true">
              <el-select v-model="vipLevel.vipType" slot="prepend" placeholder="请选择">
                <el-option value="time" label="时间型"></el-option>
                <el-option value="down" label="下载型"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="会员天数" prop="days" >
            <el-input placeholder="" type="number" v-model="vipLevel.days" ></el-input>
          </el-form-item>
          <el-form-item label="下载数量" prop="canDownNumber" >
            <el-input placeholder="" type="number" v-model="vipLevel.canDownNumber" ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="desc" >
            <el-input type="text" v-model="vipLevel.des" ></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="sellPrice">
            <el-input type="number" v-model="vipLevel.sellPrice" ></el-input>
          </el-form-item>
          <el-form-item label="促销价" prop="salePrice" >
            <el-input type="number" v-model="vipLevel.salePrice" ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" v-if="addFlag">添加</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="saveFlag">保存</el-button>
            <el-button type="" @click="resetForm('ruleForm')" >返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>
<script>
  import uploadCard from '@/components/UploadCard'
  import {UploadParam} from "../../../constant/UploadParam";
  import {Handle} from "../../../constant/Handle";
  import {ResultStatus} from "../../../constant/ResultStatus";
  import {StringUtil} from "../../../../utils/StringUtil";
  import {ContentType} from "../../../constant/ContentType";


  export default {
    data() {

      return {
        uploadParam: UploadParam,
        handle:this.$route.query.handle,
        id:this.$route.query.id,
        vipLevel:{
          id:'',
          level:'',
          des:'',
          sellPrice:'',
          salePrice:'',
          ico:'',
          canDownNumber:'',//下载数
          handle:'',
          days:'',//会员天数
          vipType:'',//下载类型

        },
        addFlag:true,
        saveFlag:true,
      };
    },
    methods: {
      submitForm:async function(formName) {

        //调用上传组件的方法
        await this.$refs.uploadCard.submitUpload();

        this.vipLevel.handle = this.handle;
        this.$axios({
          method: 'post',
          url: 'vip/level/save',
          data: JSON.stringify(this.vipLevel),
          datatype: 'json',
          headers: {
            'content-type': 'application/json;charset=UTF-8'
          },
        }).then((response) => {

          let datas = response.data;
          if (datas.code == ResultStatus.SUCCESS) {
            this.$notify(StringUtil.success(datas.msg));
            this.$router.push({name:'vipLevel'})

          } else {
            this.$notify(StringUtil.warning(datas.msg));
            return;
          }

        }).catch(function (error) {
          console.log(error)
          alert(error.data.msg);
          return false;
        });

      },
      resetForm(formName) {
        this.$router.push({name:'vipLevel'})
      },



      /**
       * 获取上传组件的回传url
       * @param data
       */
      getImgUrl: function (data) {

        this.vipLevel.ico = data;

      },
      /**
       * 查看用户
       */
      getUser(){
        this.vipLevel.handle = Handle.QUERY;
        this.vipLevel.id = this.id;

        this.$axios
          .post('/vip/level/save',
            this.vipLevel, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            this.vipLevel = datas.data;

            //调取图片组件的方法
            this.$refs.uploadCard.receiveFileList(this.vipLevel.ico);

          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      initComponent(){
        switch (this.handle) {
          case Handle.ADD:
                this.saveFlag = false;
                break;
                case Handle.UPDATE:
                  this.addFlag = false;
                  break;
                  default:
                    break;
        }
      }


      }

    ,
    components:{
      uploadCard,
    },
    mounted : async function() {
      this.getUser();
      this.initComponent();


    }
  }
</script>

<style>
  #register{
    width: 50%  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

